<template>
	<view class="categoryOuter">

		<!-- 侧边栏 -->
		<ul class="aside">
			<li v-for="item in asideData" @click="asideBtn(item.id)" :class="{active:defaultItem ===item.id}">
				<view class="asideItem">
					{{item.name}}
				</view>
			</li>
		</ul>

		<!-- 内容区 -->
		<view class="categoryMain">
			<CategoryItem :categoryData="categoryData" />
		</view>
	</view>
</template>

<script>
	import categoryItem from '../categoryItem/categoryItem.vue'
	import {
		getCategoryApi
	} from '../../api/paiModule/home.js'
	export default {
		data() {
			return {
				asideData: [],
				defaultItem: 3,
				categoryData: [],
			};
		},
		onShow() {
			this.getCategory()
		},
		methods: {
			// 侧边栏
			asideBtn(id) {
				this.defaultItem = id
				switch (id) {
					case 3:
						this.categoryData = this.asideData[0].child
						break;
					case 18:
						this.categoryData = this.asideData[1].child
						break;
					case 4:
						this.categoryData = this.asideData[2].child
						break;
					case 5:
						this.categoryData = this.asideData[3].child
						break;
					case 8:
						this.categoryData = this.asideData[4].child
						break;
					case 9:
						this.categoryData = this.asideData[5].child
						break;

				}
			},

			// 获取分类列表
			async getCategory() {
				const {
					data: res
				} = await getCategoryApi({
					method: "categories.getallcat"
				})

				this.asideData = res.data
				this.categoryData = res.data[0].child
			}

		},



		components: {
			CategoryItem: categoryItem
		}
	}
</script>

<style lang="scss" scoped>
	.categoryOuter {
		height: 85.8vh;
		display: flex;
		align-items: flex-start;

		.aside {
			height: 100%;
			width: 23%;
			background-color: #efefef;

			li {
				width: 100%;
				height: 20px;
				text-align: center;
				padding: 16px 0;
				font-size: 14px;
			}
		}

		.categoryMain {
			width: 80%;
			height: 100%;
		}
	}

	.active {
		background-color: #fff;

		.asideItem {
			height: 20px;
			border-left: 3px solid;
		}
	}
</style>
